<template>
	<view class="xz">
		<view v-for="(item1,index1) in content.content" :key="index1" @tap="screen(content,index1,index)">
			<view class="on"  >
				<text :class="[content.myanswer!=index1?'on1':'on2']"   >{{letter[index1]}}</text>
			</view>
			
			<view class="text" v-text="item1"></view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				letter:['A','B','C','D','E','F','G','H']
			}
		},
		props:["content","screen","index"],
		methods:{
		
			
		}
	}
</script>

<style lang="less" scoped>
	.xz {
		>view {
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
	
			.on {
				
				.on1{
					width: 60rpx;
					height: 60rpx;
					background: #C8C7CC;
					display: inline-block;
					line-height: 60rpx;
					text-align: center;
					border-radius: 50%;
					color: white;
					margin-right: 20rpx;
				}
				.on2{
					width: 60rpx;
					height: 60rpx;
					background: #008af8;
					display: inline-block;
					line-height: 60rpx;
					text-align: center;
					border-radius: 50%;
					color: white;
					margin-right: 20rpx;
				}
			}
			
	
			.text {
				text-align: justify;
				box-sizing: border-box;
				width: 310px;
				word-wrap: break-word;
			}
		}
	
	}
</style>
